<template>
    <view class="wanlshop-classify-container">
        <block v-if="categoryStyle === 1">
            <scroll-view :style="{ height: `${mainHeight}px` }" scroll-y class="wanlshop-classify-container__one">
                <view class="item" v-for="(item, index) in categoryData" :key="index"
                    @tap="handleProduct(item.id, item.name)">
                    <image :src="$wanlshop.oss(item.image, 350, 150)" class="list-image" />
                    <view class="category-title">
                        <view>{{ item.description }}</view>
                        <text class="text-sm text-bold text-black">- {{ item.name }} -</text>
                    </view>
                </view>
            </scroll-view>
        </block>
        <block v-else-if="categoryStyle === 2">
            <scroll-view class="wanlshop-classify-container__grid" :style="{ height: `${mainHeight}px` }" scroll-y>
                <view class="cu-list grid col-3 no-border">
                    <view class="cu-item" v-for="(item, index) in categoryData" :key="index"
                        @tap="handleProduct(item.id, item.name)">
                        <image :src="$wanlshop.oss(item.image, 80, 80)" class="list-image" />
                        <text>{{ item.name }}</text>
                    </view>
                    <view class="safeAreaBottom"></view>
                </view>
            </scroll-view>
        </block>
        <block v-else-if="categoryStyle === 3">
            <view class="wanlshop-classify-container__list">
                <scroll-view scroll-y scroll-with-animation class="left" :scroll-top="scrollTop"
                    :style="{ height: `${mainHeight}px` }">
                    <view v-for="(item, index) in categoryData" :key="item.id" class="item"
                        :class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="handleNav">
                        <text>{{ item.name }}</text>
                    </view>
                </scroll-view>
                <block v-for="(item, index) in categoryData" :key="item.id">
                    <scroll-view scroll-y class="right" :style="{ height: `${mainHeight}px` }"
                        v-if="currentTab == index">
                        <view class="list-cat">
                            <swiper class="screen-swiper square-dot" indicator-dots circular autoplay interval="4000"
                                duration="500" v-if="adverData && adverData[item.id]">
                                <swiper-item v-for="(adverts, adindex) in adverData[item.id]" :key="adindex"
                                    @tap="onAdvert(adverts)">
                                    <image lazy-load class="radius-bock" :src="$wanlshop.oss(adverts.media, 350, 0, 1)"
                                        mode="aspectFill"></image>
                                </swiper-item>
                            </swiper>
                            <view class="padding-top-sm">
                                <view class="list-item radius-bock">
                                    <view class="list-container">
                                        <view class="list-box" v-for="(category, infokey) in item.childlist"
                                            :key="infokey" @tap="handleProduct(category.id, category.name)">
                                            <image lazy-load :src="$wanlshop.oss(category.image, 60, 60)"
                                                class="list-image" />
                                            <view class="text-sm">{{ category.name }}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <uni-load-more :status="status" :content-text="contentText" />
                    </scroll-view>
                </block>
            </view>
        </block>
        <block v-else-if="categoryStyle === 4">
            <view class="wanlshop-classify-container__list">
                <scroll-view scroll-y scroll-with-animation class="left" :scroll-top="scrollTop"
                    :style="{ height: `${mainHeight}px` }">
                    <view v-for="(item, index) in categoryData" :key="item.id" class="item"
                        :class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="handleNav">
                        <text>{{ item.name }}</text>
                    </view>
                    <view class="edgeInsetBottom"></view>
                </scroll-view>
                <block v-for="(item, index) in categoryData" :key="item.id">
                    <scroll-view scroll-y class="right" :style="{ height: `${mainHeight}px` }"
                        v-if="currentTab == index">
                        <view class="list-cat">
                            <swiper class="screen-swiper square-dot" indicator-dots circular autoplay interval="4000"
                                duration="500" v-if="adverData && adverData[item.id]">
                                <swiper-item v-for="(adverts, adindex) in adverData[item.id]" :key="adindex"
                                    @tap="onAdvert(adverts)">
                                    <image lazy-load class="radius-bock" :src="$wanlshop.oss(adverts.media, 350, 0, 1)"
                                        mode="aspectFill"></image>
                                </swiper-item>
                            </swiper>
                            <view class="padding-top-sm">
                                <block v-if="item.childlist.length == 0">
                                    <wanl-product3 :dataList="goodsData" :dataStyle="liststyle" />
                                </block>
                                <block v-else>
                                    <view class="list-item radius-bock" v-for="(childlist, childkey) in item.childlist"
                                        :key="childkey">
                                        <view class="flex justify-between text-sm"
                                            @tap="handleProduct(childlist.id, childlist.name)">
                                            <text>{{ childlist.name }}</text>
                                            <text class="wlIcon-fanhui2 wanl-gray-light"></text>
                                        </view>
                                        <view class="list-container">
                                            <view class="list-box" v-for="(category, infokey) in childlist.childlist"
                                                :key="infokey" @tap="handleProduct(category.id, category.name)">
                                                <image lazy-load :src="$wanlshop.oss(category.image, 60, 60)"
                                                    class="list-image" />
                                                <view class="text-sm">{{ category.name }}</view>
                                            </view>
                                        </view>
                                    </view>
                                </block>
                                <view class="edgeInsetBottom"></view>
                            </view>
                        </view>
                    </scroll-view>
                </block>
            </view>
        </block>
    </view>
</template>

<script>
import wanlProduct3 from "@/pages/page/components/wanl-product3.vue";
export default {
    name: "wanlShopClassify",
    props: {
        shopId: {
            type: Number,
            default: 0,
        },
        categoryStyle: {
            type: Number,
            default: 1,
        },
        mainHeight: {
            type: Number,
            default: 0,
        },
        adverData: {
            type: Object,
            default() { },
        },
        categoryData: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    components: {
        wanlProduct3,
    },
    data() {
        return {
            currentTab: 0, //预设当前项的值
            scrollTop: 0, //tab标题的滚动条位置
            liststyle: "col-1-10",//商品列表样式
            goodsData: [], //商品列表数据
            reload: false, //判断是否上拉
            params: {
                search: "",
                sort: "weigh",
                order: "asc",
                page: 1,
                filter: {},
                op: {},
            },
            total: 1, //总条数
            status: "loading",
            contentText: {
                contentdown: "",
                contentrefresh: "正在加载..",
                contentnomore: "没有更多数据了",
            },
            last_page: 1, //最后一页
        };
    },
    // 下拉刷新
    onPullDownRefresh() {
        console.log(435);
        this.params.page = 1;
        this.reload = true;
        this.goodsData = [];
        this.loadData();
    },
    // 触底加载
    onReachBottom() {
        console.log(123);
        this.loadData();
    },
    mounted() {
        this.loadData();
    },
    methods: {
        handleLower() {
            this.loadData("lower");
        },
        //异步加载商品列表
        async loadData(type) {
            this.status = "loading";
            // 判断上拉还是下拉
            if (type === "lower") {
                if (this.goodsData.length >= this.total) {
                    this.status = "noMore";
                    return false;
                } else {
                    this.current_page += 1;
                }
            }
            this.params.type = "goods";
            this.params.filter = { category_id: this.categoryData[this.currentTab].id };
            this.params.op = { category_id: 'in' };
            await uni.request({
                url: "/wanlshop/product/lists",
                methods: "POST",
                data: this.params,
                success: (res) => {
                    console.log(res);
                    uni.stopPullDownRefresh();
                    this.status = "more";
                    this.goodsData = this.reload ? res.data.data : this.goodsData.concat(res.data.data); //数据 追加
                    if (res.data.data.length == 0) {
                        this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
                    }
                    this.params.page = res.data.current_page; //当前页码
                    this.last_page = res.data.last_page; //最后一页
                    this.total = res.data.total; //总条数
                },
            });
        },
        // 点击标题切换当前页时改变样式
        handleNav(e) {
            let cur = e.currentTarget.dataset.current;
            if (this.currentTab == cur) {
                return false;
            } else {
                this.currentTab = cur;
                this.checkCor();
            }
            this.goodsData = [];
            this.params.page = 1;
            this.loadData()
        },
        handleProduct(category_id, category_name) {
            if (this.shopId === 0) {
                this.$wanlshop.to(
                    `/pages/product/list?data=${JSON.stringify({
                        category_id: category_id,
                        category_name: category_name,
                    })}`
                );
            } else {
                this.$wanlshop.to(
                    `/pages/shop/product/list?shop_id=${this.shopId}&category_id=${category_id}&category_name=${category_name}`
                );
            }
        },
        //判断当前滚动超过一屏时，设置tab标题滚动条。
        checkCor() {
            if (this.currentTab > 7) {
                this.scrollTop = 500;
            } else {
                this.scrollTop = 0;
            }
        },
    },
};
</script>

<style lang="scss">
.wanlshop-classify-container {
    &__one {
        padding-left: 25rpx;
        padding-right: 25rpx;
        padding-bottom: 100rpx;
        padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

        image {
            width: 100%;
            height: 300rpx;
            border-radius: 15rpx;
            overflow: hidden;
        }

        .item {
            position: relative;
            display: flex;
            justify-content: center;
            margin-top: 25rpx;

            .category-title {
                font-size: 26rpx;
                position: absolute;
                bottom: 20rpx;
                border-radius: 10rpx;
                overflow: hidden;
                color: #666666;
                background-color: rgba(255, 255, 255, 0.6);
                width: 60%;
                text-align: center;
                padding: 4rpx 0;
            }
        }
    }

    &__grid {
        padding-bottom: 100rpx;
        padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

        .cu-list {
            background-color: rgba(255, 255, 255, 0);

            &>.cu-item {
                padding: 25rpx 0;
                align-items: center;

                image {
                    width: 160rpx;
                    height: 160rpx;
                    margin-bottom: 10rpx;
                }
            }
        }
    }

    &__list {
        display: flex;

        .left {
            width: 200rpx;
            z-index: 10;
            background: #fbfbfb;

            .item {
                width: 200rpx;
                height: 110rpx;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26rpx;
                color: #444;
                font-weight: 400;

                &.active {
                    position: relative;
                    color: #000;
                    font-size: 30rpx;
                    font-weight: 600;
                    background: white;

                    &::before {
                        content: "";
                        position: absolute;
                        border-left: 6rpx solid #fe6600;
                        height: 32rpx;
                        left: 0;
                    }
                }
            }
        }

        .right {
            width: 100%;
            padding-left: 25rpx;
            box-sizing: border-box;

            /* background-image: linear-gradient(#fff, #f2f2f2, #f4f4f4, #f6f6f6); */
            .list-cat {
                width: 100%;
                overflow: hidden;
                padding-top: 10rpx;
                padding-right: 20rpx;
                box-sizing: border-box;
            }

            .screen-swiper {
                min-height: 180rpx;
                height: 180rpx;
                overflow: hidden;
            }

            .list-item {
                background: #ffffff;
                width: 100%;
                box-sizing: border-box;
                padding: 20rpx;
                margin-bottom: 20rpx;

                .title {
                    color: #ff4f00;
                }
            }

            .list-container {
                /* padding-top: 20rpx; */
                // display: flex;
                // display: -webkit-flex;
                // justify-content: flex-start;
                // flex-direction: row;
                // flex-wrap: wrap;
            }

            .list-box {
                width: 33.3333%;
                text-align: center;
                padding-top: 40rpx;
            }

            .list-image {
                width: 120rpx;
                height: 120rpx;
            }
        }
    }
}
</style>
